<template>
    <div class="login">
        <div class="content">
            <div class="tt">
                后台管理系统
            </div>
            <div class="form">
                <el-input
                    v-model="data.username"
                    clearable
                    placeholder="请输入账号"
                    prefix-icon="el-icon-user-solid"
                    style="margin-bottom: 20px;">
                </el-input>
                <el-input
                    v-model="data.password"
                    :show-password="true"
                    clearable
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    style="margin-bottom: 20px;">
                </el-input>
                <div class="Code">
                    <el-input v-model="data.code" placeholder="请输入验证码" style="width: 60%">
                    </el-input>
                    <div class="imgs" @click="GetCode()" :style="{'background-color':backcolor}">
                        <p :style="{'color':fontColor}">{{ codeData[0] }}</p>
                        <p :style="{'color':fontColor}">{{ sign }}</p>
                        <p :style="{'color':fontColor}">{{ codeData[1] }}</p>
                    </div>
                </div>
                <el-button style="width: 100%;margin-top: 20px;" type="primary" @click="GetLogin()">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "LogoIndex",
    data() {
        return {
            data:{
                username: "admin",
                password: "123456",
                code: "",
            },
            sign: "",
            codeData: [],
            fontColor:"",
            backcolor:""
        }
    },
    mounted() {
        this.initPageData()
    },
    methods: {
        initPageData() {
            this.$http.HttpGet('v1/GetCaptcha').then((res) => {
                if (res.code == 0) {
                    this.sign = res.data.sign
                    this.codeData = res.data.data

                    this.fontColor =   this.color16()
                    this.backcolor =   this.color16()
                }

            })
        },
        color16() {

            //十六进制颜色随机

            var r = Math.floor(Math.random() * 256);

            var g = Math.floor(Math.random() * 256);

            var b = Math.floor(Math.random() * 256);

            return  "#" + r.toString(16) + g.toString(16) + b.toString(16);


        },

        GetCode() {
            this.initPageData()
        },
        // 登录
        GetLogin() {
            if (this.data.username == '') {
                this.$Msg.message("请输入账号", "error");
                return
            }
            if (this.data.password == '') {
                this.$Msg.message("请输入密码", "error");
                return
            }
            if (this.data.code == '') {
                this.$Msg.message("请输入验证码", "error");
                return
            }

            let data = this.data

            this.$http.HttpPost('v1/GetLogin',data).then((res) => {
                if (res.code == 0) {

                    this.$Msg.message(res.msg)

                    this.Cookies.set('token',res.data.token)

                    this.$router.push('/')

                }else{
                    this.$Msg.message(res.msg,"error")
                    this.initPageData()
                }

            })
        }
    }
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background: url("../assets/login.webp") 0 0 no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login .content {
    width: 340px;
    background-color: #ffffff;
    border-radius: 10px;
    /*height: 360px;*/
    padding: 25px 25px 25px 25px;
}

.login .content .tt {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.Code {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Code .imgs {

    width: 37%;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    cursor: pointer;

}

.Code .imgs p:nth-child(2) {
    margin: 0 10px;
}
</style>
